<template>
  <view class="login-container">
    <view class="wx-login-box">
      <image src="/static/touxiang.jpeg" class="app-logo" />
      <text class="slogan">让支教更简单</text>
      
      <button 
        class="wx-login-btn"
        :class="{ 'disabled': isLogging }"
        :disabled="isLogging"
        @tap="handleWxLogin"
        @longpress="toggleDebug"
        @touchstart="startLongPress"
        @touchend="endLongPress"
      >
        <text>{{ isLogging ? '登录中...' : '   微信一键登录' }}</text>
      </button>
      
      <text class="agreement-tip">
        登录即代表同意《用户协议》和《隐私政策》
      </text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogging: false, // 新增登录状态
      isDebug: true     // 调试模式开关
    }
  },
  methods: {
    async handleWxLogin() {
      if(this.isLogging) return;
      this.isLogging = true;
      
      try {
        uni.showLoading({ title: '登录中', mask: true });

        // 调试模式模拟登录
        if(this.isDebug) {
          await this.mockLogin();
          return;
        }

        // 1. 获取微信code
        const loginRes = await uni.login({ provider: 'weixin' });
        
        // 2. 获取用户信息
        const userInfo = await uni.getUserProfile({
          desc: '用于完善用户信息',
          lang: 'zh_CN'
        });

        // 3. 调用后端登录接口
        const res = await this.$api.wxLogin({
          code: loginRes.code,
          userInfo: userInfo
        });

        // 4. 登录成功处理
        uni.setStorageSync('token', res.token);
        uni.setStorageSync('userInfo', res.userInfo);
        uni.reLaunch({ url: '/pages/index/index' });
        
      } catch (error) {
        console.error('登录失败:', error);
        uni.showToast({ 
          title: error.errMsg || '登录失败', 
          icon: 'none' 
        });
      } finally {
        this.isLogging = false;
        uni.hideLoading();
      }
    },

    async handleGetPhone(e) {
      if (e.detail.errMsg.includes('ok')) {
        try {
          const { encryptedData, iv } = e.detail;
          await this.$api.bindWxPhone({
            encryptedData,
            iv,
            token: uni.getStorageSync('token')
          });
        } catch (error) {
          console.error('手机号绑定失败:', error);
        }
      }
    },

    // 新增模拟登录方法
    async mockLogin() {
      const mockUser = {
        id: Date.now(),
        nickname: '测试用户',
        avatar: '/static/mock-avatar.png'
      };
      
      uni.setStorageSync('token', 'mock-token-' + Date.now());
      uni.setStorageSync('userInfo', mockUser);
      
      await new Promise(resolve => setTimeout(resolve, 1000));
      uni.reLaunch({ url: '/pages/index/index' });
    },

    toggleDebug() {
      this.isDebug = !this.isDebug;
      uni.showToast({
        title: `调试模式 ${this.isDebug ? '开启' : '关闭'}`,
        icon: 'none'
      });
    },
    startLongPress() {
      this.longPressTimer = setTimeout(() => {
        this.toggleDebug();
      }, 2000);
    },
    endLongPress() {
      clearTimeout(this.longPressTimer);
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);

  .wx-login-box {
    width: 80%;
    text-align: center;
    
    .app-logo {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 40rpx;
      border-radius: 24rpx;
    }
    
    .slogan {
      display: block;
      color: #666;
      font-size: 32rpx;
      margin-bottom: 80rpx;
    }
    
    .wx-login-btn {
      width: 60%;
      height: 90rpx;
      background: #007AFF;
      border-radius: 50rpx;
      color: #fff;
      font-size: 32rpx;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      padding: 0 40rpx;
      margin-top: 60rpx;
      box-shadow: 0 8rpx 16rpx rgba(0, 122, 255, 0.2);
      position: relative;

      &:active {
        background: #0063CC;
        transform: scale(0.98);
      }

      .wx-logo {
        width: 40rpx;
        height: 40rpx;
        margin-right: 15rpx;
        flex-shrink: 0;
      }

      text {
        flex: none;
        text-align: center;
        width: calc(100% - 60rpx);
        position: relative;
        left: -10rpx;
      }

      &::after {
        position: absolute;
        right: 30rpx;
      }

      &.disabled {
        background: #007AFF;
        opacity: 0.7;
      }
    }
    
    .agreement-tip {
      display: block;
      margin-top: 40rpx;
      color: #999;
      font-size: 24rpx;
      
      &::before {
        content: "※ ";
        color: #f56c6c;
      }
    }
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style> 